<template>
  <g-table-page
    :store-model-name="storeModelName"
    add-btn-link-text="添加上榜机构"
    :selection="false"
    :table-operation="tableOperation"
    :show-dropdown-groups="true"
    :nest-or-not="true"
    @add-btn-func="addBtnFunc"
  >
    <!-- 根据tableHeadList slotName字端 动态插入 插槽 -->
    <template v-for="item in tableHeadListSlotName" :key="item.slotName" #[item.slotName]="{ row }">
      <div v-if="row">
        <span v-if="item.prop == 'rankType'">
          <span v-if="row[item.prop] === 1">实体榜单</span>
          <span v-if="row[item.prop] === 2">人物榜单</span>
        </span>
        <span v-if="item.prop == 'dataStime|dataEtime'">
          {{ dayjs(row['dataStime']).format('YYYY-MM-DD') }} 至
          {{ dayjs(row['dataEtime']).format('YYYY-MM-DD') }}
        </span>
      </div>
    </template>
  </g-table-page>

  <g-dialog
    v-model:dialog-visible="showOptDialog"
    :title="(rankListId > 0 ? `编辑` : `添加`) + `上榜机构`"
    :click-sure-btn="saveFormDataFunc"
    width="600"
  >
    <el-form
      ref="ruleForm"
      :model="formData"
      :rules="formRules"
      label-position="left"
      label-width="140px"
      inline
    >
      <div class="w-full">
        <el-row type="flex">
          <el-col :span="24">
            <el-form-item label="不能动文件名" prop="readonlyOrgName">
              <el-input
                v-model="formData.readonlyOrgName"
                placeholder="请输入不能动文件名"
                class="edit-item"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="24">
            <el-form-item label="奖项名称" prop="awardName">
              <el-input v-model="formData.awardName" class="edit-item" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="24">
            <el-form-item label="机构全称" prop="rankOrgName">
              <el-input
                v-model="formData.rankOrgName"
                placeholder="请输入机构全称"
                class="edit-item"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="24">
            <el-form-item label="机构简称" prop="rankOrgSname">
              <el-input
                v-model="formData.rankOrgSname"
                placeholder="请输入机构简称"
                class="edit-item"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="24">
            <el-form-item label="排序：" prop="num">
              <el-input-number
                v-model="formData.num"
                placeholder="请输入榜单序号"
                class="edit-item"
                controls-position="right"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="24">
            <el-form-item label="名次：" prop="ranking">
              <el-input-number
                v-model="formData.ranking"
                placeholder="请输入榜单序号"
                class="edit-item"
                controls-position="right"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </g-dialog>
</template>

<script setup lang="ts">
import { computed, ref, reactive } from 'vue'
import type { TableHeadList } from '@/types/storeModule'
import store from '@/store'
import { ElMessage } from 'element-plus'
import type { Loading } from '@/components/Dialog/types'
import dayjs from 'dayjs'
import { addRankListApi, updateRankListApi, removeRankListApi } from '@/api/admin'
import type { FormInstance, FormRules } from 'element-plus'

const storeModelName = 'orgListModule'
const tableOperation = {
    width: 100,
    fixed: 'right',
    buttonGroups: [
        ({ row }) => {
            return {
                name: '编辑',
                isShow: false,
                click: ({ row }) => {
                    formData.value.readonlyOrgName = row.readonlyName
                    formData.value.awardName = props.rank.rankNameCn
                    formData.value.rankOrgName = row.listName
                    formData.value.rankOrgSname = row.listSname
                    formData.value.num = row.rankListOrder
                    formData.value.ranking = row.listPlace
                    rankListId.value = row.rankListId
                    showOptDialog.value = true
                    console.log('编辑--', formData.value)
                }
            }
        },
        ({ row }) => {
            return {
                name: '删除',
                type: 'danger',
                isShow: true,
                click: ({ row }) => {
                    removeRankListApi({ id: row.rankListId }).then((res) => {
                        if (res * 1 === 200) {
                            ElMessage.success('删除成功')
                            store.dispatch('data/getTableData', storeModelName)
                        }
                    })
                }
            }
        }
    ]
}
const tableHeadListSlotName = computed(() => {
    const tableHeadList = store.state[storeModelName].tableHeadList
    return tableHeadList.filter((item: TableHeadList) => item.slotName)
})

const props = withDefaults(
    defineProps<{
    rank: any
  }>(),
    {
        rank: null
    }
)
let showOptDialog = ref<boolean>(false)
let rankListId = ref<number>(0)
let formData = ref(<
  {
    readonlyOrgName: string
    awardName: string
    rankOrgName: string
    rankOrgSname: string
    num: number
    ranking: number
  }
>{
    readonlyOrgName: '',
    awardName: '',
    rankOrgName: '',
    rankOrgSname: '',
    num: 0,
    ranking: 0
})
const ruleForm = ref<FormInstance>()
const formRules = reactive<FormRules>({
    readonlyOrgName: [{ required: true, message: '不能动文件名', trigger: 'change' }],
    rankOrgName: [{ required: true, message: '请输入机构全称', trigger: 'change' }],
    rankOrgSname: [{ required: true, message: '请输入机构简称', trigger: 'change' }],
    num: [{ required: true, message: '请输入排序', trigger: 'change' }]
})
const addBtnFunc = () => {
    showOptDialog.value = true
    // console.log('rank---', props.rank.rankNameCn);
    formData.value.awardName = props.rank.rankNameCn
    // console.log('添加--------');
}
const saveFormDataFunc = (loading: Loading) => {
    ruleForm.value?.validate(async (valid: boolean): Promise<void> => {
        if (valid) {
            loading(true)
            if (rankListId.value > 0) {
                // console.log('formData---update', formData);
                updateRankListApi(formData.value).then((res) => {
                    // console.log('res---update', res);
                    if (res * 1 === 200) ElMessage.success('编辑成功')
                })
            } else {
                // console.log('formData---add', formData);
                addRankListApi(formData.value).then((res) => {
                    // console.log('res---add', res);
                    if (res * 1 === 201) ElMessage.success('添加成功')
                    store.dispatch('data/getTableData', storeModelName)
                })
            }
            showOptDialog.value = false
        } else {
            return
        }
    })
}
</script>
